<template>
	<view class="shoplistBox">
		<view class="top flex-x-between">
			<input class="search-input flex-x-between" v-model="searchVal" type="text" placeholder="输入关键字搜索" />
			<text @click="handleSearch" class="iconfontPT iconsousuo"></text>
		</view>
		<view class="left">
			<view class="classBox">
				<view :class="activeClass == -1? 'active item':'item'" @click="getgoods(0,-1)">
					全部
				</view>
				<view :class="activeClass == index? 'active item':'item'" v-for="(item,index) in classList" :key="index" @click="getgoods(item.id,index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="right">
			<view class="goodsListBox">
				<view class="goodsItem" v-for="(item,index) in goodsList" :key="item.id">
					<view class="checkbox" @click="checkboxChange(item)">
						<label>
							<checkbox :checked="item.checked"></checkbox>
						</label>
					</view>
					<image :src="`${host}/${item.img}`" mode="aspectFill"></image>
					<view class="shopInfo">
						<view class="shopLeft">
							<view class="name">
								{{item.title}}
							</view>
							<view class="price">
								{{item.plat_price}}<text>{{item.price}}</text>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="add bg-white" @click="gotoadd">
			<text>
				确定
			</text>

		</view>
	</view>
</template>

<script>
	import {
		getGoodsList
	} from "../../../apis/shop/api.js"
	export default {
		data() {
			return {
				searchVal: "",
				class_id: "",
				store_id: "",
				goodsList: [],
				classList: [{
						title: "卤煮",
						id: 1
					},
					{
						title: "烧烤",
						id: 1
					}
				],
				activeClass: -1,
				chooseList: [],
				chooseListID: [],
				store_id: "",
				token: "",
				allgoodslist:[]
			}


		},
		onLoad(option) {
			this.store_id = uni.getStorageSync("store_id");
			this.token = uni.getStorageSync("token");
			this.getList()
		},
		computed: {
			host() {
				return this.$baseHost.car
			}
		},
		methods: {
			handleSearch() {
				this.getList()
			},
			checkboxChange(e) {
				let tempindex = 0
				this.allgoodslist.forEach((i,idx)=>{
					if(i.id== e.id){
						tempindex = idx
					}
				})
				if (e.checked) {
					e.checked = false;
					this.allgoodslist[tempindex].checked = false
					let index = this.chooseList.indexOf(e.title);
					this.chooseList.splice(index, 1)
					this.chooseListID.splice(index, 1)
				} else {
					e.checked = true;
					this.allgoodslist[tempindex].checked = true
					this.chooseList.push(e.title)
					this.chooseListID.push(e.id)
				}
			},
			gotoadd() {
				let that = this
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.setData({
					userdata: {
						'choosename': that.chooseList,
						'chooseid': that.chooseListID
					}
				})
				uni.navigateBack({
					delta: 1
				})

			},
			getList() {
				let that = this
				getGoodsList({
					search: that.searchVal,
					store_id: that.store_id,
					token: that.token,
					status: true,
					class: that.class_id
				}).then(res => {
					this.classList = res.data.class;
					this.allgoodslist = res.data.goods;
					this.allgoodslist.forEach(item=>{
						item.checked = false
					})
					console.log(this.allgoodslist)
					this.goodsList = Object.assign([],this.allgoodslist);
					console.log(this.goodsList)
  				})
			},
			getgoods(classid, index) {
				this.activeClass = index;
				this.class_id = classid;
				this.goodsList= [];
				if(index != -1){
					this.allgoodslist.forEach(item=>{
						if(item.class == classid){
							this.goodsList.push(item)
						}
					})
				}
				else{
					this.goodsList = Object.assign([],this.allgoodslist);
				}
			}
		}
	}
</script>

<style lang="less">
	.checkbox .wx-checkbox-input {
		border-radius: 36rpx;
		/* 圆角 */
		width: 36rpx;
		/* 背景的宽 */
		height: 36rpx;
		/* 背景的高 */
		border: 1px solid #ccc;
		background: #fff;
	}

	/* 复选框禁用样式 */

	.checkbox .wx-checkbox-input-disabled {
		border-radius: 30upx;
		/* 圆角 */
		width: 30upx;
		/* 背景的宽 */
		height: 30upx;
		/* 背景的高 */
		background: #f3f3f3;
		border: 1px solid rgba(201, 201, 201, 1);
	}

	/* 复选框选中后样式 */

	.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #E41805;
		border: none;
	}

	/*checkbox选中后图标样式  */

	.checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 30upx;
		height: 30upx;
		line-height: 30upx;
		text-align: center;
		font-size: 24upx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}

	page {
		width: 100%;
		height: 100%;
	}

	.shoplistBox {
		height: 100%;
		// padding-bottom: 60rpx;

		.top {
			padding: 30rpx;

			input {
				border: none;
				background-color: #f8f8f8;
				color: #999;
				height: 64rpx;
				line-height: 64rpx;
				text-indent: 40rpx;
				font-size: 28rpx;
				border-radius: 32rpx;
				width: 92%;
				padding-left: 30rpx;
				box-sizing: border-box;
			}
		}

		.left {
			width: 192rpx;
			background-color: #f8f8f8;
			height: calc(~"100% - 260rpx");
			float: left;

			.item {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #323232;

				&.active {
					background-color: #fff;
					color: #E41805;
				}
			}
		}

		.right {
			box-sizing: border-box;
			width: calc(~"100% - 200rpx");
			height: calc(~"100% - 260rpx");
			overflow: auto;
			float: right;
			padding: 30rpx;

			.checkbox {
				float: left;
				margin: 40rpx 20rpx 0 0;

				label {
					display: block;
					width: 36rpx;
					height: 36rpx;
					border-radius: 18rpx;

					checkbox {
						display: block;
						width: 36rpx;
						height: 36rpx;
						border-radius: 18rpx;
					}
				}
			}

			image {
				width: 132rpx;
				height: 132rpx;
				float: left;
				margin-right: 25rpx;
			}

			.goodsItem {
				padding-top: 40rpx;
				box-sizing: border-box;
				height: 190rpx;
			}

			.shopInfo {
				height: 100%;

				&::after {
					content: "";
					display: block;
					height: 0;
					overflow: hidden;
					clear: both;
				}

				margin-left: 20rpx;

				.shopLeft {
					float: left;

					.name {
						font-size: 30rpx;
						color: #343333;
					}

					.price {
						font-size: 30rpx;
						color: #E41805;
						margin-top: 30rpx;
						margin-left: 15rpx;

						text {
							font-size: 24rpx;
							color: #999;
							text-decoration: line-through;
							margin-left: 15rpx;
						}
					}
				}

			}
		}
	}

	.add {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30rpx;
		box-shadow: -1rpx -2rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		background-color: #fff;
	
		text {
			display: block;
			padding: 20rpx 0;
			background-color: #e41805;
			color: #fff;
			text-align: center;
			border-radius: 10rpx;
		}
	}
</style>
